<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <span class="mui-action-back" @click="fn.back()"><img class="back-btn" src="../../../../static/images/back.png"></span>
        <div v-if="!isOutSide()" class="header-search flex-center">填写会议记录内容</div>
        <div v-if="isOutSide()" class="header-search flex-center">上传会议结果附件</div>
        <div class="header-right-btn flex-center" @click="submit(0)">提交</div>
      </div>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper record-member-lists">
        <div class="mui-scroll">
          <h3 v-if="!isOutSide()" class="record-item-title">记录内容：</h3>
          <div v-if="!isOutSide()" class="message-details">
            <textarea class="list-textarea" rows="5" cols="" placeholder="请输入记录内容"
                      v-model="data.insPartyMeetingResponseModel.recordContent"></textarea>
          </div>
          <h3 v-if="!isOutSide()" class="record-item-title">讨论内容：</h3>
          <div v-if="!isOutSide()" class="message-details">
            <textarea class="list-textarea" rows="5" cols="" placeholder="请输入讨论内容"
                      v-model="data.insPartyMeetingResponseModel.discussContent"></textarea>
          </div>
          <h3 class="record-item-title">会议结果附件：</h3>
          <ul class="mui-content-padded flex-justify-start">
            <cube-upload ref="upload"
                         action=""
                         v-model="data.files"
                         accept="*/*"
                         :simultaneous-uploads="1"
                         @files-added="uploadFile"
                         @file-removed="fileRemoved"
                         @input="onInput"
            />
          </ul>
        </div>
        <div class="storage-btn mui-action-back" @click="submit(1)">暂存</div>
      </div>
    </div>

  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import api from '@/common/config/api'
  import fileIcon from '../../../../static/images/up_document.png'

  export default {
    name: 'record-content',
    data () {
      return {
        fn: tools,
        data: {
          files: [],
          attachmentList: [],
          insPartyMeetingResponseModel: {}
        }
      }
    },
    created () {
      this.data.insPartyMeetingResponseModel = this.$store.state.insPartyMeetingResponseModel
      if (this.data.insPartyMeetingResponseModel.resultFile && this.data.insPartyMeetingResponseModel.resultFile !== '') {
        this.data.attachmentList = this.data.attachmentList.concat(JSON.parse(this.data.insPartyMeetingResponseModel.resultFile))
        for (let key in this.data.attachmentList) {
          let v = this.data.attachmentList[key]
          let url = api.downLoadFile + v.fileId
          let name = v.fileName
          let file = {"url": url, "name": v.fileName, "size": v.totalBytes}
          if (!tools.isImage(file.name)) {
            file.url = fileIcon
          }
          this.data.files.push(file)
        }
      }
    },
    methods: {
      uploadFile (file) {
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        loginService.updFiles(formData).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }

          this.data.attachmentList.push({
            'fileId': res.data[0].fileId,
            'fileName': uploadFile.name,
            'totalBytes': res.data[0].totalBytes
          })
        })
      },
      // 删除文件
      fileRemoved (file) {
        let fileName
        let size
        if (file.name && file.size) {
          fileName = file.name
          size = file.size
        } else {
          fileName = file.file.name
          size = file.file.size
        }
        this.data.attachmentList.some((v, i) => {
          if (v.fileName === fileName && v.totalBytes === size) {
            this.data.attachmentList.splice(i, 1)
            return false
          }
        })
      },
      onInput (file) {
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      },
      submit (flag) {
        if (this.data.insPartyMeetingResponseModel.recordContent === '') {
          return tools.tip('记录内容不能为空')
        }
        if (this.data.insPartyMeetingResponseModel.discussContent === '') {
          return tools.tip('讨论内容不能为空')
        }
        let isTemporary = '0'
        if (flag === 1) {
          isTemporary = '1'
        }
        let resultFile = JSON.stringify(this.data.attachmentList)
        let data = {
          discussContent: this.data.insPartyMeetingResponseModel.discussContent,
          id: this.data.insPartyMeetingResponseModel.id,
          isTemporary: isTemporary,
          recordContent: this.data.insPartyMeetingResponseModel.recordContent,
          resultFile: resultFile
        }
        loginService.appSaveDiscussAndRecord(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          } else {
            tools.tip(res.message)
            if (flag === 1) {
              tools.back()
            } else {
              this.$router.push({'name': 'record'})
            }
          }
        })
      },
      isOutSide () {
        if (this.data.insPartyMeetingResponseModel && this.data.insPartyMeetingResponseModel.typeLabel === "主题党日(室外)") {
          return true
        }
        return false
      }
    }
  }
</script>

<style scoped>

</style>
